<template>
  <div class="min-h-screen text-gray-900 flex justify-center dlbox wrapper">
    <div
      class="max-w-screen-xl m-0 sm:m-10 shadow sm:rounded-lg flex justify-center flex-1"
      style="background-color: #a8cbfccf; border: 1px solid #dcdad9"
    >
      <!--外界-->
      <div class="lg:w-1/2 xl:w-5/12 p-6 sm:p-12" style="margin: auto auto">
        <h1
          class="text-2xl xl:text-3xl font-extrabold text-indigo-600"
          style="text-align: center"
        >
          欢迎来到体运管理系统
        </h1>
        <h1
          class="text-2xl xl:text-3xl font-extrabold text-indigo-600"
          style="text-align: center"
        >
          登录页面
        </h1>
        <div class="w-full flex-1 mt-8">
          <div class="mx-auto max-w-xs">
            <el-form
              :model="form"
              ref="formRef"
              :rules="rules"
              :inline="false"
              class="w-full"
            >
              <el-form-item prop="userId">
                <el-input
                  v-model="form.userId"
                  placeholder="请输入账号"
                  size="large"
                >
                  <template #prefix>
                    <el-icon class="el-input__icon"><User /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  v-model="form.password"
                  type="password"
                  show-password
                  placeholder="请输入密码"
                  size="large"
                >
                  <template #prefix>
                    <el-icon class="el-input__icon"><Lock /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  @click="onSubmit"
                  class="mt-5 text-xl text-light-50 tracking-wide font-semibold bg-indigo-500 w-full py-4 rounded-lg hover:bg-indigo-700 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none"
                  :loading="loading"
                  size="large"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>

            <!-- <input
              type="submit"
              value="登录"
              @click="onSubmit"
              class="mt-5 tracking-wide font-semibold bg-indigo-500 w-full py-4 rounded-lg hover:bg-indigo-700 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none"
            /> -->
          </div>
        </div>
      </div>
      <div class="flex-1 bg-white hidden md:flex">
        <img style="margin: auto; width: 72%" :src="leftSvg" />
      </div>
    </div>
    <ul class="w3lsg-bubbles">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<script setup>
import leftSvg from "@/assets/image/3.svg";
import { login } from "@/api/manager.js";
import { setToken } from "@/utils/auth.js";
import { onBeforeUnmount, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { toast } from "@/utils";

const router = useRouter();
const loading = ref(false);
const formRef = ref(null);

const form = reactive({
  userId: "",
  password: "",
  // userId: "17722973525",
  // password: "admin123",
});

const rules = reactive({
  userId: [{ required: true, message: "账号不能为空", trigger: "blur" }],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
});
// console.log(`output->`, import.meta.env);
const onSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) {
      return false;
    }
    loading.value = true;

    await login(form)
      .then((res) => {
        console.log(`output->data`, res);
        if (res.code == 200) {
          // console.log(`output->data.data`, res.data);
          //提示成功
          toast("登录成功");
          //存储token信息
          setToken(res.data);
          //跳转到后台首页
          router.push("/");
        } else {
          // console.log(`output->data.msg`, res.msg);
          toast(res.msg || "请求失败", "error");
        }
      })
      .finally(() => {
        loading.value = false;
      });
  });
};

//监听回车事件
function onKeyUp(e) {
  if (e.key == "Enter") onSubmit();
}

//添加键盘监听
onMounted(() => {
  document.addEventListener("keyup", onKeyUp);
});

//移除键盘监听
onBeforeUnmount(() => {
  document.removeEventListener("keyup", onKeyUp);
});
</script>

<!-- <style scoped>
.login-container {
  @apply bg-blue-500 min-h-screen;
}
.login-container .left,
.login-container .right {
  @apply flex items-center justify-center;
}
.login-container .right {
  @apply flex-col bg-light-50;
}
.right > div:first-child {
  @apply font-bold text-3xl text-gray-800;
}
.right > div:last-child {
  @apply flex items-center justify-center text-gray-300 space-x-2 my-5;
}
.right > .line {
  @apply h-[1px] w-16 bg-gray-200;
}
</style> -->

<style lang="scss" scoped>
body,
html,
.wrapper {
  height: 100%;
}
.el-input__inner {
  height: 50px !important;
  border-radius: 10px !important;
}
@media screen and (min-width: 992px) {
  .wrapper {
    position: relative;
    overflow: hidden;
  }
  .w3lsg-bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  .w3lsg-bubbles li {
    position: absolute;
    list-style: none;
    display: block;
    width: 40px;
    height: 40px;
    background-color: #a9bdff;
    bottom: -160px;
    -webkit-animation: square 25s infinite;
    -moz-animation: square 25s infinite;
    -o-animation: square 25s infinite;
    -ms-animation: square 25s infinite;
    animation: square 25s infinite;
    -webkit-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    -ms-transition-timing-function: linear;
    transition-timing-function: linear;
  }

  .w3lsg-bubbles li:nth-child(1) {
    left: 10%;
  }

  .w3lsg-bubbles li:nth-child(2) {
    left: 20%;
    width: 80px;
    height: 80px;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    -ms-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 17s;
    -moz-animation-duration: 17s;
    -o-animation-duration: 17s;
    animation-duration: 17s;
  }

  .w3lsg-bubbles li:nth-child(3) {
    left: 25%;
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -o-animation-delay: 4s;
    -ms-animation-delay: 4s;
    animation-delay: 4s;
    background-color: #9baeff;
  }

  .w3lsg-bubbles li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    -webkit-animation-duration: 22s;
    -moz-animation-duration: 22s;
    -o-animation-duration: 22s;
    -ms-animation-duration: 22s;
    animation-duration: 22s;
    background-color: rgba(255, 255, 255, 0.25);
  }

  .w3lsg-bubbles li:nth-child(5) {
    left: 70%;
  }

  .w3lsg-bubbles li:nth-child(6) {
    left: 80%;
    width: 120px;
    height: 120px;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -o-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
    background-color: rgba(255, 255, 255, 0.2);
  }

  .w3lsg-bubbles li:nth-child(7) {
    left: 32%;
    width: 160px;
    height: 160px;
    -webkit-animation-delay: 7s;
    -moz-animation-delay: 7s;
    -o-animation-delay: 7s;
    -ms-animation-delay: 7s;
    animation-delay: 7s;
    background-color: #4f69e2;
  }

  .w3lsg-bubbles li:nth-child(8) {
    left: 55%;
    width: 20px;
    height: 20px;
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    animation-delay: 15s;
    -webkit-animation-duration: 40s;
    -moz-animation-duration: 40s;
    animation-duration: 40s;
  }

  .w3lsg-bubbles li:nth-child(9) {
    left: 25%;
    width: 10px;
    height: 10px;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 40s;
    animation-duration: 40s;
    background-color: rgba(255, 255, 255, 0.3);
  }

  .w3lsg-bubbles li:nth-child(10) {
    left: 90%;
    width: 160px;
    height: 160px;
    -webkit-animation-delay: 11s;
    animation-delay: 11s;
  }

  @-webkit-keyframes square {
    0% {
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -o-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
    100% {
      -webkit-transform: translateY(-700px) rotate(600deg);
      -moz-transform: translateY(-700px) rotate(600deg);
      -o-transform: translateY(-700px) rotate(600deg);
      -ms-transform: translateY(-700px) rotate(600deg);
      transform: translateY(-700px) rotate(600deg);
    }
  }
}
@keyframes square {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
    -moz-transform: translateY(-700px) rotate(600deg);
    -o-transform: translateY(-700px) rotate(600deg);
    -ms-transform: translateY(-700px) rotate(600deg);
    transform: translateY(-700px) rotate(600deg);
  }
}
body {
  position: relative;
  background-color: #ebf3ff;
  overflow-x: hidden;
}
body::-webkit-scrollbar {
  display: none;
}

input[type="submit"] {
  font-size: 1em;
  color: #fff;
  border-radius: 15px;
  outline: none;
  border: none;
  cursor: pointer;
  padding: 1em;
  -webkit-appearance: none;
  width: 100%;
  margin: 2em 0;
}

input[type="submit"]:hover {
  background: #4f69e2;
  -webkit-transform: translateY(8px);
  -ms-transform: translateY(8px);
  -o-transform: translateY(8px);
  -ms-transform: translateY(8px);
  transform: translateY(8px);
  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.58);
  -moz-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.58);
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.58);
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
  transition: 0.5s all;
}
#forgetpw:hover {
  color: #3933b0;
  cursor: pointer;
}
#return:hover {
  color: #3933b0;
  cursor: pointer;
}
</style>
